<template>
    <div class="container">
      <el-container>
        <el-header>
            <Head />
        </el-header>
        <el-container style="padding: 5px;">
          <el-aside width="200px" >
            <TabsBack />
          </el-aside>
          <el-container style="padding: 20px;background-color: #f0f8ff;">
            <el-main class="main" >
              <router-view></router-view>
            </el-main>
          </el-container>
        </el-container>
      </el-container>
    </div>
</template>

<script setup lang="ts">
import Head from './HomeComponents/Head.vue'
import TabsBack from './HomeComponents/TabsBack.vue'
import MonthlyActivityBarChart from './chart/MonthlyActivityBarChart.vue'; // 引入新创建的组件
</script>


<style scoped lang="scss">
.container {
  height: 100%;
  min-height: 100vh; // 至少占满整个视口
  display: flex;
  flex-direction: column;
//   background-color: #f0f0f0;
  .el-header{
    background-color: #409eef;
    //居中，文本水平布局
    display: flex;
    //上下居中
    align-items: center;
    //整个文本框到header的距离
    padding: 0px;
  }
  .el-aside{
    background-color: #fff;
    display: flex;
    padding: 5px;
  }
  .el-main{
    background-color: #fff; /* 设置为浅蓝色 */
    display: flex;
    padding: 30px;
    flex-direction: column; /* 确保内容垂直排列 */
    border-radius: 10px; /* 添加圆角 */
    width: 100%; /* 设置宽度为100% */
    max-width: 1200px; /* 可选：设置最大宽度 */
    margin: 0 auto; /* 居中对齐 */
  }
}
</style>

